<template>
	<view>
		<view class="flex-around">
			<view  @click="current=index" :class="current==index?'active':'tabitem'" v-for="(i,index) in tablist">
				<image class="tabimg" v-if="current==index" src="/static/bgcolor.jpg" mode=""></image>
				{{i.name}}
			</view>
		</view>
		<view class="infobox u-p-24 u-radius-10" v-for="i in newlist" @click="todetail(i.id)">
			<view class="flex-between">
				<view class=" u-m-r-30 nhidden-3">
					{{i.title}}
				</view>
				<image v-if="i.file" :src="i.file" class="infoimg u-radius-10 u-shrink-no" mode=""></image>
			</view>
			<view class="u-m-t-30 flex-between u-font-26" style="color: #999;">
				<text>{{i.creatTime}}</text>
				<text>{{i.view}}浏览</text>
			</view>
		</view>
		<u-empty v-if="newlist.length==0" ></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tablist: [{
					name: '政策新闻',
					value: '新闻'
				}, {
					name: '相关法规',
					value: '法规'
				}],
				newlist: [],
				current: 0,
				type:'新闻'
			};
		},
		watch:{
			current(newv,olev){
				this.newlist=[]
				this.type = newv==1?'法规':'新闻'
				this.init()
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			todetail(id){
				uni.navigateTo({
					url:'/pages/detail/detail?id=' +id
				})
			},
			init() {
				this.$api.get('/news/listForWeChat', {
					type: this.type
				}).then(res => {
					this.newlist = [...this.newlist,...res.rows]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.active {
		color: #000;
		position: relative;
		.tabimg {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			height: 14rpx;
		}
	}

	.tabitem {
		position: relative;
		color: #999;
		.tabimg {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			height: 14rpx;
		}
	}
	.infobox{
		width: 90%;
		margin: 30rpx auto;
		box-sizing: border-box;
		background-color: #F6F6F6;
		.infoimg{
			width: 200rpx;
			height: 140rpx;
		}
	}
</style>